﻿@model List<PerfectBuyData.Articulo>
@{
    ViewBag.Title = "Articulos";
    Layout = "~/Views/Shared/_Layout_Articulos.cshtml";
}
<article id="grid">
    <div id="breadcrumb"><a href="Index">Home</a> > @Html.ActionLink("Articulos", "Articulos", "Home", new { productCategory = "todos" }, null)</div>
    <header>
        <div class="paging">
            Página: <a onclick="javascript:return getPage(1);" href="#">1</a>&nbsp;<a onclick="javascript:return getPage('', '', '1');" href="#">Mostrar Todos</a>
        </div>
        <form action="#">
            <select onchange="javascript:addSort();" name="sortBy" id="sortBy">
                <option value="">Predeterminado</option>
                <option value="PriceHiLo">Precio (Mayor a Menor)</option>
                <option value="PriceLoHi">Precio (Menor a Mayor)</option>
                <option value="pID">Más Recientes</option>
            </select>
            &nbsp; @Model.Count artículos
        </form>
    </header>
    <ul id="items">
       

        @for (int i = 0; i < Model.Count; i++)
        {
            string urlImagen = Model[i].urlImagen;
            <li>
                <a href="@Url.Action("DetalleArticulo", "Home", new { idArticulo = @Model[i].id })" >
                    <img src="@urlImagen" alt=""/></a>
                @{
            string nombre;
            if (Model[i].nombre.Length > 50)
            {
                nombre = Model[i].nombre.Substring(0, 50) + "...";
            }
            else
            {
                nombre = Model[i].nombre;
            }
                }
                <a href="@Url.Action("DetalleArticulo", "Home", new { idArticulo = @Model[i].id })" class="title">@nombre</a>
                <strong>$@Model[i].precio</strong>
            </li>
        }
    </ul>
    <footer>
        <div class="paging">
            Página: <a onclick="javascript:return getPage(1);" href="#">1</a>&nbsp; | &nbsp;2&nbsp; | &nbsp;<a onclick="javascript:return getPage(3);" href="#">3</a>  |  <a onclick="javascript:return getPage('', '', '1');" href="#">Mostrar Todos</a>
        </div>
    </footer>
</article>
